<template>
    <el-container>
        <el-header>
            <main-menu></main-menu>
        </el-header>
        <el-divider style="margin: 0"/>
        <el-container>
            <el-aside>
                <side-menu></side-menu>
            </el-aside>
            <el-main>
                <el-scrollbar>
                    <router-view/>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
    height: 100%;
}

html,body {
    padding: 0;
    margin: 0;
    height: 100%;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
<script setup>
import MainMenu from "@/components/MainMenu.vue";
import SideMenu from "@/components/SideMenu.vue";

</script>

<script>
export default {
    name: 'App',
    methods: {
        getStorage: function () {
            if (sessionStorage.getItem('store')) {
                this.$store.replaceState(
                    Object.assign(
                        {},
                        this.$store.state,
                        JSON.parse(sessionStorage.getItem('store'))
                    )
                )
            }

            window.addEventListener('beforeunload', () => {
                sessionStorage.setItem('store', JSON.stringify(this.$store.state))
            })
        }
    },
    created() {
        this.getStorage()
    }
}
</script>


<style scoped>
.el-container {
    height: 100%;
}
.el-header {
    height: 80px;
    line-height: 80px;
    color: cornflowerblue;
}
.el-main {
    height: 100%;
    margin-left: 20px;
    margin-right: 20px;
}
.el-aside {
    width: 15%;
    background: ghostwhite;
}


</style>